<template>
<div class="list">
    <ul>
        <li  v-for="(item,key) in sessions" :class="{ active : key === package.room}" @click="select_session(key)">
            <img class="avatar"  width="30" height="30" src="images/2.png">
            <p class="name">{{ item.count ? item.name+' 未读消息：'+item.count : item.name }}</p>
        </li>
    </ul>
</div>
</template>

<script>
    export default {
        props : {
            sessions : Object,
            package : Object
        },
        methods : {
            select_session : function (room) {
                this.$parent.select_session(room);
            }
        }
    };
</script>

<style scoped lang="less">
.list {
    li {
        padding: 12px 15px;
        border-bottom: 1px solid #292C33;
        cursor: pointer;
        transition: background-color .1s;

        &:hover {
            background-color: rgba(255, 255, 255, 0.03);
        }
        &.active {
            background-color: rgba(255, 255, 255, 0.1);
        }
    }
    .avatar, .name {
        vertical-align: middle;
    }
    .avatar {
        border-radius: 2px;
    }
    .name {
        display: inline-block;
        margin: 0 0 0 15px;
    }
}
</style>